<template>
	<!-- <view>
		<image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
	<view :style="{'background':kbackgroundColor}" style="min-height: 100vh">
	
		<hx-navbar title="设置" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden" transparent="auto"></hx-navbar>
		<view class="content">
			<view class="cont-box">
				<view class="settings_item">
					<view class="settings_name">昵称</view>
					<input type="text" v-model="nickname" :adjust-position="false" class="inputr"
						placeholder="请输入昵称" placeholderStyle="font-size: 32rpx;color: #666;"/>
				</view>
			</view>
			<!-- <view class="cont-box m-t-20">
				<view class="settings_item">
					<view class="settings_name">手机号</view>
					<input type="text" disabled v-model="mobile" class="inputr" />
				</view>
			</view>
			<view class="cont-box m-t-20">
				<view class="settings_item">
					<view class="settings_name">注册时间</view>
					<input type="text" disabled v-model="ctime" class="inputr" />
				</view>
			</view> -->
		</view>
		
		<view class="submit" :style="{background:kbuttonBgColor,color:knavgroundColor}" @click="submitHandler()">立即提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'picker',
				avatar: '',
				index: 2,
				nickname: '',
				username: "",
				mobile: '',
				ctime: '',
				submitStatus: false
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			//性别
			bindPickerChange: function(e) {
				this.sex = e.target.value;
			},
			//生日
			bindDateChange: function(e) {
				this.birthday = e.target.value;
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 用户上传头像
			uploadAvatar() {
				this.$api.uploadFiles(res => {
					if (res.status) {
						let avatar = res.data.url // 上传成功的图片地址
						// 执行头像修改
						this.$api.changeAvatar({
							avatar: avatar
						}, res => {
							if (res.status) {
								this.$common.successToShow('上传成功', () => {
									this.avatar = res.data.avatar
								})
							} else {
								this.$common.errorToShow(res.msg)
							}
						})
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			// 保存资料
			submitHandler() {
				this.submitStatus = true;
				let sex = this.sex + 1;

				this.$api.editInfo({
					// sex: sex,
					// birthday: this.birthday,
					nickname: this.nickname
				}, res => {
					this.$common.successToShow("修改成功", result => {
						// this.submitStatus = false;
						uni.navigateBack({
							delta: 1
						});
					});
				}, res => {
					this.submitStatus = false;
				});
			}
		},
		onLoad: function() {
			var _this = this;
			_this.$api.userInfo({}, function(res) {
				if (res.status) {
					_this.nickname = res.data.nickname;
				} else {
					//报错了
					_this.$common.errorToShow(res.msg);
				}
			});
		}
	}
</script>

<style lang="scss">
	@import url('/pages/user/settings/settings.css');
</style>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		.cont-box {
			z-index: 2;
			padding: 10rpx 30rpx;
			background-color: $bg-box;
			border-radius: 20rpx;
			position: relative;
			.settings_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.inputr {
				text-align: right;
				font-size: 32rpx;
				color: #333;
				font-weight: 400;
			}
		}
	}
	.submit {
		width: 650rpx;
		height: 90rpx;
		// background-color: #ffffff;
		// border: var(--borderSty);
		// color: var(--selectColorSize);
		color: #ffffff;
		border-radius: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 400;
		position: fixed;
		left: 50%;
		bottom: 50rpx;
		z-index: 2;
		transform: translateX(-50%);
	}
</style>